{% extends "admin/base.html" %}

{% block title %}学生管理{% endblock %}

{% block content %}
<div class="flex flex-col md:flex-row items-center justify-between mb-8">
    <!-- 搜索栏 -->
  <form id="searchForm" action="/admin/search" method="GET" class="relative w-full md:w-1/2 lg:w-1/3">
    <input
        type="text"
        name="keyword"
        placeholder="搜索学号/姓名"
        class="w-full px-10 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 text-sm"
        aria-label="学生搜索"
    >
    <button
        type="submit"
        class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary focus:outline-none bg-transparent p-0 m-0"
    >
        <i class="fa fa-search"></i>
    </button>
</form>



    <!-- 新增按钮 -->
    <div class="md:flex-shrink-0">
        <!-- 改为调用 openAddModal() -->
        <button class="btn btn-primary btn-hover scale-animation text-sm px-6 py-3" onclick="openAddModal()">
            <i class="fa fa-plus mr-2"></i> 新增学生
        </button>
    </div>
</div>
    {% if search_keyword %}
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
    <p class="text-sm text-blue-700">
        <i class="fa fa-search mr-2"></i>搜索结果："{{ search_keyword }}"（共 {{ student_list|length }} 条记录）
    </p>
</div>
{% endif %}
<!-- 学生列表卡片 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
    <table class="min-w-full">
        <thead>
            <tr class="bg-primary/5">
                <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-sm font-medium text-primary">学号</th>
                <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-sm font-medium text-primary">姓名</th>
                <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-sm font-medium text-primary">年龄</th>
                <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-sm font-medium text-primary">班级</th>
                <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-sm font-medium text-primary">状态</th>
                <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-sm font-medium text-primary">联系方式</th>
                <th class="px-6 py-3 border-b-2 border-gray-200 text-right text-sm font-medium text-primary">操作</th>
            </tr>
        </thead>
        <tbody>
            {% for student in student_list %}
            <tr class="hover:bg-gray-50 transition-colors" data-id="{{ student.id }}">
                <td class="px-6 py-4 border-b border-gray-200 text-sm text-neutral-dark">
                    {{ student.student_no }}
                </td>
                <td class="px-6 py-4 border-b border-gray-200 text-sm text-neutral-dark font-medium">
                    {{ student.username }}
                </td>
                <td class="px-6 py-4 border-b border-gray-200 text-sm text-neutral-dark font-medium">
                    {{ student.age }}
                </td>
                <td class="px-6 py-4 border-b border-gray-200 text-sm text-neutral-dark">
                    {{ student.class_.class_name if student.class_ else '未分配' }}
                </td>
                <td class="px-6 py-4 border-b border-gray-200 text-sm text-neutral-dark">
                    {{ student.status }}
                </td>
                <td class="px-6 py-4 border-b border-gray-200 text-sm text-neutral-dark">
                    {{ student.telephone | default('未填写', true) }}
                </td>
                <td class="px-6 py-4 border-b border-gray-200 text-right text-sm">
                    <!-- 改为调用 openEditModal(student.id) -->
                    <button class="text-primary hover:text-primary/70 mr-2"
                            onclick="openEditModal({{ student.id }})">
                        <i class="fa fa-pen-alt"></i>
                    </button>
                    <button class="text-red-500 hover:text-red-700"
                            onclick="confirmDelete({{ student.id }})">
                        <i class="fa fa-trash-alt"></i>
                    </button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- 空数据提示 -->
    {% if not student_list %}
    <div class="p-12 text-center">
        <div class="mb-6">
            <i class="fa fa-users text-4xl text-primary/20"></i>
        </div>
        <h3 class="text-lg font-bold text-neutral-dark mb-2">还没有学生记录</h3>
        <p class="text-gray-500 mb-6">点击下方按钮添加第一位学生</p>
        <!-- 改为调用 openAddModal() -->
        <button class="btn btn-primary btn-hover scale-animation" onclick="openAddModal()">
            <i class="fa fa-plus mr-2"></i> 新增学生
        </button>
    </div>
    {% endif %}
</div>

<!-- 模态框 -->
<div id="modal" class="fixed inset-0 flex items-center justify-center z-50 bg-black/50 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-4xl p-6 md:p-8 transform scale-95 transition-transform duration-300" id="modalContent">
        <!-- 关闭按钮（无需修改，调用 closeModal() ）-->
        <button class="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors" onclick="closeModal()">
            <i class="fa fa-times text-gray-500"></i>
        </button>

        <!-- 模态框标题和表单内容不变 -->
        <div class="flex items-center mb-6">
            <div id="modalIcon" class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center mr-3">
                <i class="fa fa-user-plus text-primary"></i>
            </div>
            <h2 class="text-xl font-bold text-gray-800" id="modalTitle">新增学生</h2>
        </div>


        <!-- 表单 -->
        <form id="studentForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- 基础信息卡片 -->
            <div class="bg-gray-50 rounded-xl p-5 space-y-4 w-full">
                <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                    <i class="fa fa-user-circle text-gray-500 mr-2"></i> 基础信息
                </h3>

                <!-- 姓名字段 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="username">姓名</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-user"></i>
                        </span>
                        <input type="text"
                               id="username"
                               name="username"
                               class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
                               placeholder="请输入学生姓名"
                               required
                               minlength="2"
                               maxlength="80">
                    </div>
                    <div id="usernameError" class="text-red-500 text-xs mt-1 hidden"></div>
                </div>

                <!-- 学号字段 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="studentNo">学号</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-id-card"></i>
                        </span>
                        <input type="text"
                               id="studentNo"
                               name="studentNo"
                               class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
                               placeholder="请输入学号"
                               required
                               minlength="6"
                               maxlength="20">
                    </div>
                    <div id="studentNoError" class="text-red-500 text-xs mt-1 hidden"></div>
                </div>

                <!-- 年龄字段 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="age">年龄</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-calendar"></i>
                        </span>
                        <input type="number"
                               id="age"
                               name="age"
                               class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
                               placeholder="请输入年龄"
                               min="14"
                               max="60">
                    </div>
                    <div id="ageError" class="text-red-500 text-xs mt-1 hidden"></div>
                </div>

                <!-- 性别字段 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="gender">性别</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-venus-mars"></i>
                        </span>
                        <select id="gender"
                                name="gender"
                                class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all appearance-none">
                            <option value="">请选择性别</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                            <option value="其他">其他</option>
                        </select>
                        <span class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 pointer-events-none">
                            <i class="fa fa-chevron-down"></i>
                        </span>
                    </div>
                    <div id="genderError" class="text-red-500 text-xs mt-1 hidden"></div>
                </div>
            </div>

            <!-- 联系与学籍信息卡片 -->
            <div class="bg-gray-50 rounded-xl p-5 space-y-4 w-full">
                <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                    <i class="fa fa-address-card text-gray-500 mr-2"></i> 联系与学籍信息
                </h3>

                <!-- 电话号码字段 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="telephone">电话</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-phone"></i>
                        </span>
                        <input type="tel"
                               id="telephone"
                               name="telephone"
                               class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
                               placeholder="请输入手机号码"
                               pattern="[0-9]{11}"
                               title="请输入11位手机号码">
                    </div>
                    <div id="telephoneError" class="text-red-500 text-xs mt-1 hidden"></div>
                </div>

                <!-- 地址字段 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="address">地址</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-map-marker"></i>
                        </span>
                        <input type="text"
                               id="address"
                               name="address"
                               class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
                               placeholder="请输入地址"
                               maxlength="120">
                    </div>
                    <div id="addressError" class="text-red-500 text-xs mt-1 hidden"></div>
                </div>

                <!-- 班级字段 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="classId">班级</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-users"></i>
                        </span>
                        <select id="classId"
                                name="classId"
                                class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all appearance-none">
                            <option value="">未分配班级</option>
                            {% for class_item in classes_list %}
                            <option value="{{ class_item.id }}">{{ class_item.class_name }}</option>
                            {% endfor %}
                        </select>
                        <span class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 pointer-events-none">
                            <i class="fa fa-chevron-down"></i>
                        </span>
                    </div>
                    <div id="classIdError" class="text-red-500 text-xs mt-1 hidden"></div>
                </div>

                <!-- 专业字段 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="major">专业</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-book"></i>
                        </span>
                        <input type="text"
                               id="major"
                               name="major"
                               class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
                               placeholder="请输入专业"
                               maxlength="50">
                    </div>
                    <div id="majorError" class="text-red-500 text-xs mt-1 hidden"></div>
                </div>
            </div>

            <!-- 账户与状态卡片 -->
            <div class="bg-gray-50 rounded-xl p-5 space-y-4 md:col-span-2">
                <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                    <i class="fa fa-lock text-gray-500 mr-2"></i> 账户与状态
                </h3>

                <!-- 密码字段 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="password">密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-key"></i>
                        </span>
                        <input type="password"
                               id="password"
                               name="password"
                               class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
                               placeholder="请输入密码（6-120位）"
                               required
                               minlength="6"
                               maxlength="120">
                        <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 toggle-password">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                    </div>
                    <div id="passwordError" class="text-red-500 text-xs mt-1 hidden">密码需6-120位</div>
                </div>

                <!-- 学籍状态字段 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="status">学籍状态</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-id-card-o"></i>
                        </span>
                        <select id="status"
                                name="status"
                                class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all appearance-none">
                            <option value="">请选择状态</option>
                            <option value="在读">在读</option>
                            <option value="休学">休学</option>
                            <option value="毕业">毕业</option>
                            <option value="退学">退学</option>
                        </select>
                        <span class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 pointer-events-none">
                            <i class="fa fa-chevron-down"></i>
                        </span>
                    </div>
                    <div id="statusError" class="text-red-500 text-xs mt-1 hidden"></div>
                </div>
            </div>
        </form>
<!-- 操作按钮 - 调整为右对齐但保留间距 -->
<div class="w-full flex items-center justify-end pt-4 space-x-4 ">
    <button type="button" class="px-5 py-2.5 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors" onclick="closeModal()">
        <i class="fa fa-times mr-1"></i> 取消
    </button>
    <button type="button" id="saveButton" class="px-5 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all">
        <i class="fa fa-check mr-1"></i> 保存
    </button>
</div>

</div>
</div>

    <script src="{{ url_for('static',filename='js/admin_js/admin_student.js')}}"></script>
{% endblock %}